<template>
  <CustomTag
    :text="getStatusUI.text"
    font-size="24rpx"
    :background-color="getStatusUI.style.backgroundColor"
    :color="getStatusUI.style.color"
    :border="(getStatusUI.style.border as string)"
    padding="8rpx 16rpx"
  />
</template>

<script setup lang="ts">
  import { MatchApprovalStatusEnum } from '@/enums/businessOpportunitiesEnum';
  import { computed, type CSSProperties, type PropType } from 'vue';
  import CustomTag from '@/components/CustomTag/index.vue';

  const props = defineProps({
    status: Number as PropType<MatchApprovalStatusEnum>,
  });

  const getStatusUI = computed<{ style: CSSProperties; text: string }>(() => {
    switch (props.status) {
      case MatchApprovalStatusEnum.pending:
        return {
          style: {
            backgroundColor: '#e29942',
            color: '#fff',
          },
          text: '待审核',
        };
      case MatchApprovalStatusEnum.agree:
        return {
          style: {
            backgroundColor: '#d0f7ff',
            color: '#2878ff',
          },
          text: '已同意',
        };
      case MatchApprovalStatusEnum.refuse:
        return {
          style: {
            backgroundColor: '#F2F3F5',
            color: '#333',
          },
          text: '已拒绝',
        };
      default:
        return { style: {}, text: '' };
    }
  });
</script>

<style scoped></style>
